{% extends 'base.html' %}
{% block title %}Brispon{% endblock %}
{% block stylesheet %}
{{ block.super }}
{% endblock%}

{% block javascript %}
{{ block.super }}
 <script type="text/javascript" src="{% url base_static "js/jquery.blockUI.js" %}"></script>
<script>
$(function(){
  $("#sms").click(function(){
    var couponId = $(this).parent().attr("id");
    var address = 'sms/' + couponId; 
    var msg = '';
    //console.log(address);
    $.blockUI({ message: '<h3><img src="{% url base_static "images/loading.gif" %}"/> Sending Text Message...</h3>' }); 
    
    $.get(address, function(data){
      if(data.result == "sent") {
        msg = 'You will get the coupon in a few minutes  ';
      } else {
        msg = 'Fail to sent a coupon  ';
      }
    }).complete(function(){
      $.unblockUI();
      $.blockUI({message: '<h3>' + msg + '</h3>'});
      setTimeout($.unblockUI, 2000);
    });
    return false;
  });
});
</script>
{% endblock%}

{% block content %}
<div>
  <input type="text" name="coupon" /> 
  <select>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
  <table class="zebra-striped">
  <thead>
    <tr>
      <th>Coupon Name</th>
      <th>Store</th>
      <th>SMS</th> 
    </tr>
  </thead>
  <tbody>
  {% for coupon in coupons %}
  	<tr>
  	  <td>{{ coupon.name }}</td>
  	  <td><img src="{{ coupon.event.store.logo }}" width="100" height="100"><a href="">{{ coupon.event.store }}</a></td>
  	  <td id="{{ coupon.id }}"><a class="btn" id="sms" href="#">sms</a></td>
    </tr>
  {% endfor %}
  </tbody>
  </table>
</div>
    
{% endblock %}
